<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>借款人信息认证</i></h3>
      <el-steps :active="active" simple>
        <el-step title="填写借款人信息" icon="el-icon-edit"></el-step>
        <el-step title="提交平台审核" icon="el-icon-upload"></el-step>
        <el-step title="认证结果" icon="el-icon-picture"></el-step>
      </el-steps>

      <div v-if="active === 0" class="user-borrower">
        <!-- 1 -->
        <h6>个人基本信息</h6>
        <el-form label-width="120px">
          <el-form-item label="年龄">
            <!-- 栅格系统：布局的标签 -->
            <el-col :span="5">
              <el-input v-model="borrower.age" />
            </el-col>
          </el-form-item>

          <el-form-item label="性别">
            <el-select v-model="borrower.sex">
              <el-option :value="1" :label="'男'" />
              <el-option :value="0" :label="'女'" />
            </el-select>
          </el-form-item>
          <el-form-item label="婚否">
            <el-select v-model="borrower.marry">
              <el-option :value="true" :label="'是'" />
              <el-option :value="false" :label="'否'" />
            </el-select>
          </el-form-item>
          <el-form-item label="学历">
            <el-select v-model="borrower.education">
              <el-option
                v-for="item in educationList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="行业">
            <el-select v-model="borrower.industry">
              <el-option
                v-for="item in industryList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="月收入">
            <el-select v-model="borrower.income">
              <el-option
                v-for="item in incomeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="还款来源">
            <el-select v-model="borrower.returnSource">
              <el-option
                v-for="item in returnSourceList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 2 -->
        <h6>联系人信息</h6>
        <el-form label-width="120px">
          <el-form-item label="联系人姓名">
            <el-col :span="5">
              <el-input v-model="borrower.contactsName" />
            </el-col>
          </el-form-item>
          <el-form-item label="联系人手机">
            <el-col :span="5">
              <el-input v-model="borrower.contactsMobile" />
            </el-col>
          </el-form-item>
          <el-form-item label="联系人关系">
            <el-select v-model="borrower.contactsRelation">
              <el-option
                v-for="item in contactsRelationList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <h6>身份认证信息</h6>
        <el-form label-width="120px">
          <el-form-item label="身份证人像面">
            <el-upload
              :on-success="onUploadSuccessIdCard1"
              :on-remove="onUploadRemove"
              :multiple="false"
              :action="uploadUrl"
              :data="{ module: 'idCard1' }"
              :limit="1"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="身份证国徽面">
            <el-upload
              :on-success="onUploadSuccessIdCard2"
              :on-remove="onUploadRemove"
              :multiple="false"
              :action="uploadUrl"
              :data="{ module: 'idCard2' }"
              :limit="1"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <h6>其他信息</h6>
        <el-form label-width="120px">
          <el-form-item label="房产信息">
            <el-upload
              :on-success="onUploadSuccessHouse"
              :on-remove="onUploadRemove"
              :multiple="false"
              :action="uploadUrl"
              :data="{ module: 'house' }"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="车辆信息">
            <el-upload
              :on-success="onUploadSuccessCar"
              :on-remove="onUploadRemove"
              :multiple="false"
              :action="uploadUrl"
              :data="{ module: 'car' }"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>

        <el-form label-width="120px">
          <el-form-item>
            <el-button
              type="primary"
              :disabled="submitBtnDisabled"
              @click="save"
            >
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-if="active === 1">
        <div style="margin-top:40px;">
          <el-alert
            title="您的认证申请已成功提交，请耐心等待"
            type="warning"
            show-icon
            :closable="false"
          >
            我们将在2小时内完成审核，审核时间为周一至周五8:00至20:00。
          </el-alert>
        </div>
      </div>

      <div v-if="active === 2">
        <div style="margin-top:40px;">
          <el-alert
            v-if="borrowerStatus === 2"
            title="您的认证审批已通过"
            type="success"
            show-icon
            :closable="false"
          >
          </el-alert>
          <NuxtLink to="/user/apply" v-if="borrowerStatus === 2">
            <el-button style="margin-top:20px;" type="success">
              我要借款
            </el-button>
          </NuxtLink>
          <el-alert
            v-if="borrowerStatus === -1"
            title="您的认证审批未通过"
            type="error"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      uploadUrl: "http://192.168.1.170/admin/oss/upload", //上传图片的路径
      contactsRelationList: [], //联系人关系集合
      returnSourceList: [], //还款来源集合
      incomeList: [], //月收入集合
      industryList: [], //行业集合
      educationList: [], //学历集合
      borrower: {
        borrowerAttachs: [], //借款人上传的附件集合
      },
      submitBtnDisabled: false,
      active: null,
      //区分展示审核结果的 借款人认证状态
      borrowerStatus: 0,
    };
  },
  created() {
    this.getStatus();
  },
  methods: {
    //查询借款人审核状态
    getStatus() {
      this.$axios.$get("/api/core/borrower/auth/getStatus").then((r) => {
        //this.$message.success(r.message);
        //this.active = 1; //保存成功跳转到下一步
        this.borrowerStatus = r.data.status;
        //判断状态显示不同的步骤
        if (this.borrowerStatus === 0) {
          this.active = 0;
          this.initData(); //只有展示借款人填写表单时 才查询数据字典
        } else if (this.borrowerStatus === 1) {
          this.active = 1;
        } else {
          this.active = 2;
        }
      });
    },

    //上传成功的每张图片都需要存到后端数据库 borrower_attach
    onUploadSuccess(response, file, type) {
      //如果borrowerAttachs中已存在type值对应的对象，更新它的imageUrl和fileName
      if (this.borrower.borrowerAttachs.length > 0) {
        for (let i = 0; i < this.borrower.borrowerAttachs.length; i++) {
          if (this.borrower.borrowerAttachs[i].imageType === type) {
            //新增的附件对象 集合中已存在  更新它的url地址和文件名称 结束当前方法
            this.borrower.borrowerAttachs[i].imageUrl = response.data.path;
            this.borrower.borrowerAttachs[i].imageName = file.name;
            console.log("更新后: ", this.borrower.borrowerAttachs);
            return;
          }
        }
      }

      //将上传成功的文件路径使用borrower对象的属性来接收
      this.borrower.borrowerAttachs.push({
        imageType: type,
        imageName: file.name,
        imageUrl: response.data.path,
      });
      console.log("新增后:", this.borrower.borrowerAttachs);
    },
    //图片类型image_type  （idCard1：身份证正面，idCard2：身份证反面，house：房产证，car：车）
    //image_url  图片路径
    //image_name 图片名称
    //上传组件的事件函数
    onUploadSuccessHouse(response, file) {
      //去重
      this.onUploadSuccess(response, file, "house");
    },
    onUploadSuccessCar(response, file) {
      this.onUploadSuccess(response, file, "car");
    },
    //上传身份证背面照成功的回调
    onUploadSuccessIdCard2(response, file) {
      this.onUploadSuccess(response, file, "idCard2");
    },
    //上传身份证正面照成功后的回调
    onUploadSuccessIdCard1(response, file) {
      this.onUploadSuccess(response, file, "idCard1");
      //处理上传成功的结果  接收上传成功的图片地址
    },
    //删除上传组件中的文件时的回调
    onUploadRemove(file) {
      console.log(file.response.data.path);
      //file.response.data.path 可以获取到要移除的图片的地址，访问oss删除文件的接口可以删除文件
      this.$axios({
        url: `/admin/oss/delete?imgPath=${file.response.data.path}`,
        method: "DELETE",
      }).then((r) => {
        this.$message.success(r.data.message);
      });
    },
    initData() {
      //查询行业集合
      this.$axios
        .$get(`/api/core/dict/queryDictsByDictCode/industry`)
        .then((r) => {
          this.industryList = r.data.items;
        });
      //查询还款来源集合
      this.$axios
        .$get(`/api/core/dict/queryDictsByDictCode/returnSource`)
        .then((r) => {
          this.returnSourceList = r.data.items;
        });
      //月收入集合
      this.$axios
        .$get(`/api/core/dict/queryDictsByDictCode/income`)
        .then((r) => {
          this.incomeList = r.data.items;
        });
      //学历集合
      this.$axios
        .$get(`/api/core/dict/queryDictsByDictCode/education`)
        .then((r) => {
          this.educationList = r.data.items;
        });
      //关系集合
      this.$axios
        .$get(`/api/core/dict/queryDictsByDictCode/relation`)
        .then((r) => {
          this.contactsRelationList = r.data.items;
        });
    },
    save() {
      //第一步的提交按钮
      this.submitBtnDisabled = true;
      //发送收集的数据提交给后端保存
      this.$axios
        .$post("/api/core/borrower/auth/saveBorrower", this.borrower)
        .then((r) => {
          this.$message.success(r.message);
          this.active = 1; //保存成功跳转到下一步
        });
    },
  },
};
</script>
